<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<style>

    body{
        background: url(http://demo.mxyhn.xyz:8020/cssthemes5/cpts_1155_cht/images/banner.jpg);
        background-repeat: repeat-x;
    }
    .button{
        height: 152px;
        width: 100%;
        background-color: #434a54;
        position: absolute;
        top: 570px;
        left: 0;
    }

</style>
<body>
<div id="app">

    <div class="center">
        <fieldset style="width: 500px;margin: 0 auto; color: goldenrod;font-weight: bold;margin-top: 100px;">
            <legend>添加菜品</legend>

            <el-form id="mealFrom" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" style="color: white;">
                <el-form-item label="菜品名称：" prop="cname">
                    <el-input v-model="ruleForm.cname" style="width: 260px;" name="cname"></el-input>
                </el-form-item>

                <el-form-item label="菜品价格：" prop="price">
                    <el-input v-model="ruleForm.price" style="width: 260px;" name="price"></el-input>
                </el-form-item>

                <el-form-item label="菜品图片：">
                    <img id="mealImg" width="60px" height="60px"style="position: absolute;left: 2px;">
                    <input id="foo" @change="changeImg()" type="file" name="headImg" style="position: absolute;left: 75px;top: 16px;" />
                </el-form-item>

                <el-form-item style="margin-top: 90px;">
                    <el-button type="primary" @click="submitForm('ruleForm')"style="margin-left: 45px;">立即添加</el-button>
                    <el-button @click="resetForm('ruleForm')">重置</el-button>
                </el-form-item>
            </el-form>
        </fieldset>


    </div>
    <div class="button">

    </div>

</div>

<script>

    var haha = new Vue({
        el:"#app",
        data:{
            dialogImageUrl: '',
            dialogVisible: false,
            ruleForm:{},
            rules:{
                cname: [
                    { required: true, message: '请输入菜名', trigger: 'blur' },
                    { min: 1, max: 7, message: '长度在 1 到 7 个字符', trigger: 'blur' }
                ],
                price: [
                    { required: true, message: '请输入价格', trigger: 'blur' },
                    { min: 1, max: 5, message: '请不要乱设置价格', trigger: 'blur' }
                ]
            }
        },
        methods:{
            changeImg(){
                var r = new FileReader();
                r.readAsDataURL(foo.files[0]);
                r.onload = function(){
                    mealImg.src = r.result;
                }
            },
            submitForm(formName) {
                haha.$refs[formName].validate((valid) => {
                    if (valid) {
                        var mealData = new FormData(mealFrom);
                        $.ajax({
                            url:"/aaa/meal/addMeal",
                            type:"POST",
                            data:mealData,
                            processData:false,
                            contentType:false,
                            success:function(backData){

                            }
                        });
                    }
                });
            },

        }
    })
</script>

</body>
</html>